import styles from './orderList.css';
import { Table, Divider, Tag, message, Input, Modal,Switch } from 'antd';
import {useState,useEffect} from 'react';
import Link from 'umi/link';
import {Button} from 'antd'
import {connect} from 'dva';
const { Search } = Input;

function orderList(props) {
	window.scrollTo(0,0)
	const [visible,setVisible] = useState(false)
	let value1 ="";
	let value2 ="";
	let value3 ="";
	let value4 ="";
	let value5 ="";
	const handleCancel=()=>{
		setVisible(false)
		props.history.go(0)
	}	
	const [coss,setCoss] = useState(0)
	useEffect(() => { 
		const fetchData = async () =>props.dispatch({
			type: 'info/getOrderList',
			payload: {
				page:1,
				per:10,
				no:'',
				user:''
			}
		}); 
		fetchData(); 
	}, [coss])
	const columns = [
	  {
	    title: '订单号',
	    dataIndex: 'order',
	  },
	  {
	    title: '用户ID',
	    dataIndex: 'key',
	  },
	  {
	    title: '是否支付',
	    dataIndex: 'isPayed',
		render: text =><Switch defaultChecked={text} checkedChildren="Yes" unCheckedChildren="No"></Switch>
	  },
	  {
	    title: '收货地址',
	    dataIndex: 'address',
	  },
	  {
	    title: '操作',
	    render: (text, record) => (
	      <span>
	        <a onClick={()=>props.dispatch({
				type:'info/getOrderInfo',
				payload:{
					id:record.key
				}
				}).then(()=>{
				setVisible(true)
			})}>修改</a>
	        <Divider type="vertical" />
	        <a onClick={()=>props.dispatch({
					type:'info/deleteOrder',
					payload:{
						id:record.key
					}
				}).then(()=>{
					message.success('删除成功~');
					setCoss(() => {
					    return (coss+1);
					  })
				})
			}>删除</a>
	     </span>
	    ),
	 },
	];
	const data=[]
	for(let i=1;i<props.page+1;i++){
		props.productlist.map(item=>
		data.push({
			index:i,
			order: item.no,
			key:item._id,
			name: item.name,
			address:item.address,
			image:item.coverImg,
			isPayed:item.isPayed
		}))
	}
	console.log(data)
	console.log(props.current,props.totalCount)
	const total={
      columns:columns,
      dataSource: data,
      pagination: {
        pageSize:10,
        current: props.current,
        total:props.totalCount,
        onChange: (page) => props.dispatch({
			type: 'info/getOrderList',
			payload: {
				page,
				per:10,
				no:'',
				user:''
			}
		})
      }
    }
	
	const search=value=>{
		if(value!=''){
			props.history.push({pathname:'/home/searchOrder',query:{id:value}})
			console.log(value)
		}
	}
	
  return (
    <div className={styles.normal}>
      <h1>订单列表</h1>
	  <Search placeholder="请输入订单号" onSearch={value =>search(value)} enterButton className={styles.search}/>
	  <Table {...total}/>
	  <Modal
	      title="修改"
	      visible={visible}
	      onOk={()=>props.dispatch({
	  		type:'info/editOrder',
	  		payload:{
	  			id:props.id,
				orderNo:value1.state.value,
				orderPrice:value2.state.value,
				userId:value3.state.value,
				orderCreatedAt:value4.state.value,
				isPayed:value5.rcSwitch.state.checked
	  		}
	  	}).then(()=>{
	  		setVisible(false)
	  		if(props.id){
	  			message.success('修改成功~')
	  			setCoss(() => {
	  				return (coss+1);
	  			})
	  			setTimeout(function() {
	  				props.history.go(0)
	  			},0);
	  		}
	  	})}
	      onCancel={handleCancel}
	  	okText="确认"
	  	cancelText="取消"
	  >
	      订单号:(不可更改)<Input value={props.orderNo} type="text" style={{height:40,margin:10}} ref={(val) =>value1 = val} />
	      商品价格:(不可更改)<Input value={props.orderPrice} type="text" style={{height:40,margin:10}} ref={(val) =>value2 = val} />
	      用户ID:(不可更改)<Input value={props.userId} type="text" style={{height:40,margin:10}} ref={(val) =>value3 = val} />
		  下单时间:(不可更改)<Input value={props.orderCreatedAt} type="text" style={{height:40,margin:10}} ref={(val) =>value4 = val} />
		  是否支付:<Switch defaultChecked={props.orderIsPayed} ref={(val) =>value5 = val} checkedChildren="已支付" unCheckedChildren="未支付" style={{margin:10}}/>
	  </Modal>
    </div>
  );
}
export default connect(state=>state.info)(orderList)